<!-- 食堂负责人审核 -->
<template>
  <view class="canteen-supervisor-audit">
    <view class="top">
      <van-cell-group>
        <van-field
          :value="form.outboundInfo.applyname"
          label="申请人："
          readonly
        ></van-field>
        <van-field
          :value="form.outboundInfo.outbound_reason"
          label="出库原因:"
        ></van-field>
        <van-field
          v-model="form.outboundInfo.expect_time"
          title-width="98"
          label="期望领用时间："
        ></van-field>
      </van-cell-group>
    </view>
    <view v-if="form.outbound_type == '0'">
      <canteen-audit :list="form.purchasegoodsinfo" ></canteen-audit>
    </view>
    <view class="content" v-else>
      <view class="title flexb">
        <view class="title_left f26"> 采购商品明细 </view>
        <view class="title_right flexb f26">
          <view>共<text>{{ form.purchasegoodsinfo.length }}</text>件商品
          </view>
          <view class="total ml10">
            总计：
            <text>
              ￥{{ form.purchasegoodsinfo.reduce((prev, item) => prev * 1 + item.total_money * 1,0)}}
            </text>
          </view>
        </view>
      </view>
      <view class="list_box">
        <view class="list_item f28" v-for="(item, index) in form.purchasegoodsinfo" :key="index">
          <view class="list_item_title flexb">
            <view class="name flexAI f28 fwbold">
              <view class="point br50 mr10"></view>
              <view>品名：{{ item.goods_name }}</view>
            </view>
            <view> 数量：{{ item.goods_num }} </view>
          </view>
          <view class="type-Shelf_life flexb">
            <view> 使用类型：{{ item.use_type_name }} </view>
            <view> 保质期（天）：{{ item.assurancetime }} </view>
          </view>
          <view class="production_date-unit_price flexb">
            <view> 生产日期：{{ item.productiontime }} </view>
            <view> 单价：<text>￥{{ item.goods_price }}</text></view>
          </view>

          <view class="details-subtotal flexb">
            <view class="details f28" @click="details(item)"> 详情 </view>
            <view class="subtotal f28 fwbold"> 小计：￥{{ item.total_money }} </view>
          </view>
        </view>
      </view>
    </view>
    <view class="btn-box mt100">
      <!-- 后面需要 -->
      <!-- <van-button color="#999999 " type="info" @click="disagree" >不同意</van-button> -->
      <van-button color="#62B158" type="info" @click="agree">同意</van-button>
    </view>

    <!--详情弹框 -->
    <van-overlay :show="detailsShow" z-index="99" class="myover">
      <view class="wrapper flexc">
        <view class="block f28">
          <view class="title flexb f32">
            <view class="details fwbold   "> 详情 </view>
            <view class="icon" @click="offShow">
              <van-icon name="clear" color="#3E3D3D" size="20px" />
            </view>
          </view>
          <van-cell-group>
            <van-field
              :value="detailForm.goods_name"
              label="名称："
            ></van-field>
            <van-field 
              :value="detailForm.unit_name" 
              label="单位："
            ></van-field>
            <van-field 
              :value="detailForm.goods_price" 
              label="单价"
            ></van-field>
            <van-field 
              :value="detailForm.goods_num" 
              label="数量："
            ></van-field>
            <van-field
              :value="detailForm.address"
              label="产地："
            ></van-field>
            <van-field
              :value="detailForm.assurancetime"
              title-width="100"
              label="保质期（天）："
            ></van-field>
            <van-field
              :value="detailForm.productiontime"
              label="生产日期："
            ></van-field>
            <van-field
              :value="detailForm.warehousing_time"
              label="出库日期："
            ></van-field>
            <van-field
              :value="detailForm.add_time"
              label="入库日期："
            ></van-field>
            <van-field
              :value="detailForm.use_type_name"
              label="使用类型："
            ></van-field>
            <van-field
              :value="detailForm.total_money"
              label="小计："
            ></van-field>
          </van-cell-group>
        </view>
      </view>
    </van-overlay>

    <!-- 不同意弹框 -->
    <van-overlay :show="disagreeShow">
      <view class="wrapper flexc">
        <view class="block f28">
          <view class="title flexb f32">
            <view class="details fwbold">不同意 </view>
            <view class="icon" @click="offShow">
              <van-icon name="clear" color="#3E3D3D" size="20px" />
            </view>
          </view>
          <view class="content">
            <view class="title"> 审核人意见: </view>
            <view class="textbox">
              <van-field
                rows="8"
                :value="idea"
                type="textarea"
                placeholder="请填写意见"
                autosize
                :border="true"
              />
            </view>
            <view class="btn_style">
              <van-button color="#999999 " type="info">取消</van-button>
              <van-button color="#62B158" type="info">提交</van-button>
            </view>
          </view>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        outbound_sn: "", //出库单号
        outboundInfo: {},
        purchasegoodsinfo: [],
        outbound_type:"", //类型
      },
      detailsShow: false,
      detailForm: {},
      disagreeShow: false, //不同意
      confirm: "", //是否同意出库
      show:false,
    };
  },

  // 监听页面加载，该钩子被调用时
  onLoad(options) {
    this.form.outbound_sn = options.outbound_sn;
  },
  methods: {
    /*获取列表信息*/ 
    async getOutDeliveryorder() {
      if (this.form.outbound_sn) {
        let res = await this.$ajax.outDeliveryorder({
          outbound_sn: this.form.outbound_sn,
        });
        if (res.code == 1) {
          this.form.outbound_type = res.data.outboundInfo.outbound_type
          // 套餐类型
          if (res.data.outboundInfo.outbound_type == '0') {
            this.form.outboundInfo= res.data.outboundInfo; //套餐单据信息
            this.form.purchasegoodsinfo = res.data.purchasegoodsinfo; //套餐子项信息
          }else{
            // 其他类型
            this.form.outboundInfo = res.data.outboundInfo;
            this.form.purchasegoodsinfo = res.data.purchasegoodsinfo;
          }
        } else {
            uni.showToast({
            title: res.msg,
            icon: "none",
          });
        }
      }
    },
    /*查看材料配比*/ 
    async goMaterials(){

    },
    /*详情*/ 
    details(item) {
      this.detailsShow = true;
      this.detailForm = item;
    },
    offShow() {
      this.detailsShow = false;
      this.disagreeShow = false;
    },
    /*不同意*/ 
    disagree() {
      this.disagreeShow = true;
    },
    /*同意*/ 
    async agree() {
      this.confirm = 1;
      if (this.confirm == 1) {
        let res = await this.$ajax.outPrincipalconfirm({
          outbound_sn: this.form.outbound_sn,
          confirm:this.confirm,
          opinion:this.form.outboundInfo.outbound_reason, //备注
        })
        if (res.code == 1) {
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 1000,
          });
          setTimeout(()=>{
            uni.navigateTo({
              url: "../outboundManagement/outboundManagement",
            });
          },1000)
        }else{
          uni.showToast({
            title: res.msg,
            icon: "none",
            duration: 1000,
          });
          setTimeout(()=>{
            uni.navigateTo({
              url: "../outboundManagement/outboundManagement",
            });
          },1000)
        }
      }

    },
  },

  mounted() {
    this.getOutDeliveryorder();
  },

  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {
    uni.setNavigationBarTitle({
      title: "食堂负责人审核",
    });
  },

  // 监听用户下拉动作，一般用于下拉刷新
  onPullDownRefresh() {},

  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
};
</script>

<style lang="scss" >
.textbox {
  border: 1rpx solid #ddd;
  border-radius: 10rpx;
  padding: 10rpx;
  min-height: 400rpx;
  .van-cell {
    padding: 0;
  }
}
.canteen-supervisor-audit {
  width: 100%;
  min-height: 100vh;
  height: 100%;
  background: rgba(244, 244, 244, 1);
  padding-bottom: 50rpx;
  .top {
    background: rgba(255, 255, 255, 1);
  }
  .content {
    .title {
      padding: 20rpx 30rpx;

      .title_left {
        color: rgba(153, 153, 153, 1);
        font-family: SourceHanSansSC-regular;
      }

      .title_right {
        color: rgba(153, 153, 153, 1);
        font-family: SourceHanSansSC-regular;

        text {
          color: red;
          font-weight: bold;
        }
        .total {
          text {
            font-weight: bold;
            color: #d12312;
          }
        }
      }
    }
    .list_box {
      padding-bottom: 20rpx;
      .list_item {
        width: 100%;
        line-height: 55rpx;
        background: rgba(255, 255, 255, 1);
        color: rgba(16, 16, 16, 1);
        padding: 20rpx 20rpx;
        font-family: SourceHanSansSC-regular;
        margin-bottom: 20rpx !important;

        .list_item_title {

          .name {
            color: rgba(16, 16, 16, 1);
            font-family: SourceHanSansSC-bold;

            .point {
              width: 15rpx;
              height: 15rpx;
              background: rgba(98, 177, 88, 1);
            }
          }
        }

        .type-Shelf_life {
        }

        .production_date-unit_price {
          border-bottom: 0.5rpx solid #e7e4e4;
          padding-bottom: 10rpx;
          text {
            color: #d12312;
          }
        }

        .details-subtotal {
          padding-top: 10rpx;

          .details {
            color: rgba(46, 136, 238, 1);
            font-family: SourceHanSansSC-regular;
          }

          .subtotal {
            color: rgba(209, 35, 18, 1);
            font-family: SourceHanSansSC-bold;
          }
        }
      }
    }
  }
  .btn-box {
    display: flex;
    justify-content: space-evenly;

    ::v-deep .van-button {
      width: 180rpx;
      height: 72rpx;
      border-radius: 8rpx;
      color: rgba(255, 255, 255, 1);
      font-size: 28rpx;
      text-align: center;
      font-family: Microsoft Yahei;
    }
  }
}

// 弹框样式
.myover {
  z-index: 100 !important;
  .van-transition {
    z-index: 100 !important;
  }
}
.van-fade-enter-active {
  z-index: 99;
}
.wrapper {
  height: 100%;

  .block {
    width: 100%;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 40rpx 20rpx;

    .title {
      color: rgba(16, 16, 16, 1);
      font-family: SourceHanSansSC-bold;
      padding-bottom: 10rpx;
      .details {
      }
    }
    // 不同意
    .content {
      margin-bottom: 68rpx;
      .btn_style {
        display: flex;
        justify-content: space-evenly;
        margin-top: 66rpx; 
        ::v-deep .van-button {
          width: 180rpx;
          height: 72rpx;
          border-radius: 8rpx;
          color: rgba(255, 255, 255, 1);
          font-size: 28rpx;
          text-align: center;
          font-family: Microsoft Yahei;
        }
      }
    }
  }
}
</style>